<template>
 <!-- <el-container> -->
<!-- //增增加增 -->
  <el-button type="primary" @click="add(props)" color="#BDB76B" :dark="isDark">+添加</el-button>
   <!-- <el-table :data="tableData" height="450" border stripe style="width: 100%"> -->
 <!-- <el-aside width="1000px">  -->
  <el-table :data="tableDataFromDB.slice((currentPage - 1) * pagesize, currentPage * pagesize)" height="450" stripe style="width: 100%">
    <el-table-column prop="userId" label="特殊用户的id" width="120" />
    <el-table-column prop="userName" label="特殊用户的用户名" width="120" />
    <el-table-column prop="realName" label="特殊用户的真实姓名" width="120" />
    <el-table-column prop="deleteFlag" label="测试用删除" width="120" />
    <el-table-column fixed="right" label="操作" width="100">
      <template #default="row">
        <!-- 删除 -->
        <el-popconfirm title="确w定y要l删除该用户吗?" @confirm="del(row)">
          <template #reference>
            <el-icon :size="30" color="#EF3E61"><Failed /></el-icon>
          </template>
        </el-popconfirm>
      </template>
      <!-- //删除↑ -->
    </el-table-column>
  </el-table>
  <el-pagination
        layout="total,sizes,prev,pager,next,jumper"
        :total="tableDataFromDB.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5,10,15,20]"
        :page-size="pagesize"/>
        <!-- ↑分页 -->
  <el-dialog v-model="tianjiakeshi622" title="wyl增加用户" width="30%">
    <el-form label-width="120px">
      <el-form-item label="用户id_wyl">
        <el-input v-model="is_a_tianjiabianliang_622.userId" />
      </el-form-item>
      <el-form-item label="用户名_wyl">
        <el-input v-model="is_a_tianjiabianliang_622.userName" />
      </el-form-item>
      <el-form-item label="真实姓名_wyl">
        <el-input v-model="is_a_tianjiabianliang_622.realName" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="tianjiakeshi622 = false">wyl取消添加</el-button>
        <el-button type="primary" @click="insert()" v-model="tianjiakeshi622"
          >确认添加</el-button>
      </span>
    </template>
  </el-dialog>
  
  <font size="5" color="grown" face="SimSun">第三组20006380109+王胤霖+特殊用户管理页面</font>
</template>
<script>
import { get } from '@/utils/request'
import { ElMessage } from 'element-plus'
export default {
  data() {
    return {
      currentPage: 1, //默认页码为1
      pagesize: 5, //默认一页显示10条

      xiugaijiemian622: false,//两两两两个项目的变量名和方法名要完全不同
      tianjiakeshi622: false,//添加窗体的可见性
      is_a_xiugaibianliang_622: {}, //对应了点击编辑按钮时的行数据
      is_a_tianjiabianliang_622:{},
      tableData: [ ],
      tableDataFromDB: [ ]
    }
  },
  mounted(){
      get('/getAllSpecials').then((res)=>{
        console.log(res)
        this.tableDataFromDB = res.data
        //console.log(this.tableDataFromDB)
      }
      )
      //get('/getSpecialsWithUser').then((res)=>{
       // console.log(res)
     //   this.tableDataFromDB = res.data
        //console.log(this.tableDataFromDB)
     // }
     // )
  },
  methods: {
    
	handleSizeChange (size) {
      console.log(size,'size');
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange (currentPage) {
      console.log(currentPage,'currentPage');
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
},


    del(shanchuzhexinxi) {
      console.log(shanchuzhexinxi)
      get('/deleteSpecial',{userId:shanchuzhexinxi.row.userId}).then((res) => {
        ElMessage({
          message:'用户信息删除成wyl功',
          type:'success'
        })
        window.location.reload()
      })
    },
    add(){
        this.tianjiakeshi622 = !this.tianjiakeshi622
    },
    insert(){//加
      this.tianjiakeshi622 =! this.tianjiakeshi622
      get('/addSpecial',this.is_a_tianjiabianliang_622).then((res) => {
        ElMessage({
          message:'特殊用户添加成功',
          type:'success'
        })
        window.location.reload()
      })
    }
  }
}
</script>